<template>
	<view class="notice-bar-container" :style="{ backgroundColor: bgColor, color: color }" v-if="text">
		<view class="notice-bar-text" :style="{ animation: animation }">{{ text }}</view>
	</view>
</template>

<script>
export default {
	props: {
		bgColor: {
			type: String,
			default: '#fdf6ec'
		},
		color: {
			type: String,
			default: '#f9ae3d'
		},
		text: {
			type: String,
			default: ''
		},
		duration: {
			type: Number,
			default: 10
		}
	},
	data() {
		return {
			animation: ''
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.animation = '';
			let timer = setTimeout(() => {
				this.animation = `notice-bar-loop ${this.duration}s linear infinite both`;
				clearTimeout(timer);
			}, 3000);
		}
	},
	watch: {
		text(nl) {
			if (nl) {
				this.init()
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.notice-bar-container {
	position: absolute;
	bottom: 0px;
	.notice-bar-text {
		padding: 9px 50px;
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
		letter-spacing: 1px;
	}
}
</style>
